<template>
  <div class="edit_container" :class="{ warn_edit_container: warnTextLength }">
    <quill-editor   
      v-model="content" 
      :ref="refid" 
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)" 
      @change="onEditorChange($event)">
    </quill-editor>
    <div class="text_number_tips" :class="{ warn_text_number_tips: warnTextLength }">{{ currentLength }}/{{ maxTextLength }}
    </div>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { getSimpleId } from '../utils/IdGenerate'
export default {
  components: {
    quillEditor
  },
  props: {
    value: {
      type    : String,
      default : ''
    },
    max: {
      type    : Number,
      default : 0
    },
    validateMaxText: {
      type    : Boolean,
      default : false
    },
    id: {
      type    : String,
      default : ''
    },
    width:{
      type    : Number,
      default : 80
    },
    height:{
      type    : Number,
      default : 400
    }
  },
  data() {
    return {
      refid            : getSimpleId().toString(),
      content          : this.value,
      currentLength    : 0,
      defaultMaxLength : 255,
      editorOption     : {
        height:this.height,
        placeholder: '请输入文本...',
      }
    }
  },
  methods: {
    onEditorBlur(editor) {

    }, // 失去焦点事件
    onEditorFocus(v)     {

    }, // 获得焦点事件
    onEditorChange(v)    {
      this.currentLength = v.text.length - 1;
      this.$emit('input', this.content);
    }, // 内容改变事件
  },
  computed: {
    editor() {
      return this.$refs[this.refid].quill;
    },
    maxTextLength() {
      let len = this.defaultMaxLength;
      if (this.max >= 1) {
        len   = this.max;
      }
      return len;
    },
    warnTextLength() {
      const  warn = this.validateMaxText && this.currentLength > this.maxTextLength;
      return warn;
    }
  },
  watch: {
    value(newVal) {
      this.content = newVal;
    },
    height(nv){
      this.editor.container.style.height = `${nv}px`
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.editor.container.style.height = `${this.height}px`
    })
  }
}
</script>

<style scoped>
.ql-editor {
  background-color: #FFF;
}
.ql-toolbar{
  background-color: #FFF;
}

.ql-picker-label svg{
  vertical-align: top;
}

.ql-snow .ql-picker-label::before {
  display: inline-block;
  line-height: 22px;
  vertical-align: top;
}

.edit_container .text_number_tips {
  float: right;
  margin-top: -30px;
  padding-right: 10px;
}

.warn_edit_container {
  border: solid 1px #F56C6C;
}

.warn_text_number_tips {
  color: #F56C6C;
}
</style>